//  buttons
//  ---------------------

$button-bg 					: #1f665e !default;
$button-color 				: #f2f2f2 !default;
$button-height 				: 40px !default;


.btn, .btn:visited, %btn, %btn:visited {
	display: inline-block;
	position: relative;
	padding: 0 1.5em 0.15em;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	@include border-radius(30px);
	cursor: pointer;
	background-color: $button-bg;
	color: $button-color;
	border: 0;
	outline: 0;
	line-height: $button-height;

	-webkit-appearance: none;
	-webkit-tap-highlight-color: transparent;

	@include transition( background-color 300ms ease-out, border-color 300ms ease-out );
	@include single-box-shadow(0, 2px, 2px, 0, black(.35));

	&:hover, &:focus, &:active {
		color: #fff;
		text-decoration: none;
		outline: 0;
	}
	&:active {
		top: 1px;
		margin-bottom: 0;
		@include single-box-shadow(0,1px,0,0,rgba(0,0,0,0.6));
	}

	& + p {
		margin-top: 1em;
	}
}
.btn::-moz-focus-inner {
	padding: 0;
	border: 0;
}

// bare bones link appearance
.btn--link {
	@extend .link--padded;
	background: none;
	border: 0;
}


// actions
.btn--add, .btn--add:visited {
	background-color: #68b52c;
	color: white;
	&:hover, &:focus, &:active {
		background-color: $success-bg;
		border-color: $success-bg;
		color: white;
	}
}
.btn--delete, .btn--delete:visited {
	background-color: $error-bg;
	color: white;
	&:hover, &:focus, &:active {
		background-color: $error-bg;
		border-color: $error-bg;
		color: white;
	}
}

.btn--disabled, .btn--disabled:visited {
	opacity: 0.35;
	background-color: #999;
	color: #eee;
	@include box-shadow(none);
	cursor: not-allowed;
}


// size modifiers
.btn--fit {
	// fit to grid
	width: 100%;
}

.btn--clear {
	background-color: transparent;
	border: solid 1px $white;
	color: $white;
}

.btn--inverse, .btn--inverse:visited {
	@extend %btn;
	background-color: #111;
	color: $white;

	&:active {
		background-image: none;
		outline: 0;
		text-decoration: none;
	}
}

.btn--bottom {
	opacity: 0;
	transform: translate3d(0, 0, 0);
	transition: transform 400ms, opacity 400ms;
	transition-delay: 600ms;
	transition-timing-function: ease;
	position: absolute;
	left: 50%;
	bottom: 0;

	width: 200px;
	margin-left: -100px;

}

.btn--complete {
	position: relative;
	&::before {
		display: inline-block;
		height: 30px;
		width: 30px;
		content: url("data:image/svg+xml,%3Csvg%20id%3D%22icon--check%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20viewBox%3D%220%200%2036%2036%22%3E%3Cpath%20d%3D%22M3%2C16%20%20l10%2C10%20%20l20%2C-20%22%20stroke%3D%22%23fff%22%20fill%3D%22none%22%20stroke-width%3D%224%22%20stroke-linejoin%3D%22round%22%20%2F%3E%3C%2Fsvg%3E");
	}
}